<template>
  <page-layout>
    <a-row :gutter="[10, 10]">
      <!-- 顶部区域 -->
      <a-col :span="24">
        <a-card>
          <div class="box-ver-hor-between">
            <div class="primary-color">教授管理</div>
            <div>
              <!-- TODO 批量导入-->
              <a-button type="primary"> 
                批量导入
              </a-button>

              <!-- TODO 批量导入-->
              <a-button type="primary" @click="openDialog('visibleAppend')"> 
                新建
              </a-button>
              
              <button><router-link :to="'./modal/append.vue'">Home</router-link></button>
            </div>
          </div>
        </a-card>
      </a-col>
      
      <!-- 中心区域 -->
      <a-col :span="24">
        <a-card>
          <div class="mb-20">
            <!-- 查询参数 -->
            <pro-query
              :searchParam="searchParam"
              @on-search ="search"
            ></pro-query>
          </div>
          <!-- 列表 -->
          <pro-table
            ref="tableRef"
            :fetch="fetch"
            :columns="columns"
            :operate="operate"
            :param="state.param"
            :pagination="pagination"
            :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }"
          >
          </pro-table>
        </a-card>
      </a-col>
    </a-row>

    <append :visible="state.visibleAppend" @close="closeAppend"></append>

  </page-layout>
</template>

<script>
import append from './modal/append'
// import professorInfo from './modal/professorInfo'
import { message , modal} from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { tree, remove, removeBatch } from "@/api/module/dept";
import { reactive, createVNode, ref } from 'vue';

const removeKey = "remove";

export default {
  components: {
    append,
    // professorInfo
  },
  
  setup() {

    const tableRef = ref()

    const switchFormat = { yes: true, no: false, event: function(value,record){
        record.enable = !record.enable;
        return value;
      }}

    const columns = [
      { dataIndex: "pName", key: "pName", title: "教授名称" },
      { dataIndex: "school", key: "school", title:"所属学校" },
      { dataIndex: "phone", key: "phone", title: "电话"},
      { dataIndex: "email", key: "email", title: "Email" },
      { dataIndex: "createRole", key: "createRole", title: "创建人" },
      { dataIndex: "createTime", key: "createTime", title: "创建时间"},
    ];

    /// 数据来源 [模拟]
    const fetch = async (param) => {
      var response = await tree(param);
      return {
        total: response.data.total,
        data: [{
          pName : '1',
          school : '1',
          phone : '1',
          email : '1',
          createRole : '1',
          createTime : '2019-5-6',
        }]//response.data.record,
      };
    };

    /// 删除配置
    const removeMethod = (record) => {
      modal.confirm({
        title: '您是否确定要删除此配置?',
        icon: createVNode(ExclamationCircleOutlined),
        okText: '确定',
        cancelText: '取消',
        onOk() {
          message.loading({ content: "提交中...", key: removeKey });
          remove({"id":record.id}).then((response) => {
            if(response.success){
              message.success({content: "删除成功", key: removeKey, duration: 1}).then(()=>{
                tableRef.value.reload()
              })
            }else{
              message.error({content: "删除失败", key: removeKey, duration: 1})
            }
          })
        }
      });
    }

    /// 行操作
    const operate = [
      { label: "详情", event: function (record) { state.visibleAppend = false }},
      // { label: "修改", event: function (record) { state.visibleEdit = true, state.recordEdit = record }},
      { label: "删除", event: function (record) { removeMethod(record) }},
    ];

    const openDialog = (type) => {
      state[type] = true
      console.log(type)
    }

    /// 分页参数
    const pagination = {
      Number: 1,
      total: 10,
    }

    const state = reactive({
      selectedRowKeys: [],
      param: {},
      visibleSave: false,
      visibleEdit: false,
      visibleAppend: false,
      recordEdit: {},
      recordInfo: {},
    })

    const test = function(){
      this.$router.push('./modal/professorInfo.vue');
    }

    const searchParam = [
      { key: "pName", type: "input", label: "教授名称", placeholder: '请输入教授名称'},
      { key: "job", type: "input", label: "职称", placeholder: '请输入职称'},
      { key: "school", type: "input", label: "学校名", placeholder: '请输入学校名'},
      { dataIndex:"createTime", key: "createTime", type: "rangeTime", label: "创建时间"},
    { key: "createRole", type: "input", label: "创建人", placeholder: '请输入申请人查询'},
    ]

    const search = function(value) {
      state.param = value
      tableRef.value.reload()
    }

    const onSelectChange = selectedRowKeys => {
      state.selectedRowKeys = selectedRowKeys;
    };

    const closeSave = function() {
      state.visibleSave = false
      tableRef.value.reload()
    }

    const closeEdit = function() {
      state.visibleEdit = false
      tableRef.value.reload()
    }

    const closeAppend = function() {
        console.log('111')
      state.visibleAppend = false
      tableRef.value.reload()
    }

    return {
      state,
      fetch,
      search,
      columns,
      operate,
      pagination,
      searchParam,
      onSelectChange,

      closeSave,
      closeEdit,
      closeAppend,

      openDialog,

      routes: [
        {
          path: './index.vue',
          breadcrumbName: 'professor-manage',
        },
        {
          path: './modal/append.vue',
          breadcrumbName: 'append',
        },
        {
          path: './modal/professorInfo.vue',
          breadcrumbName: 'professorInfo',
        },
      ],

      tableRef
    };
  },
};
</script>
